<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            /*width: 100%;*/
            /*height: 100%;*/
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #root {
            width: 1000px;
            display: flex; /* 采用flex布局*/
            flex-wrap: wrap; /* flex布局换行*/
        }

        #head {
            height: 100px;
        }

        #middle {
            display: flex; /* 采用flex布局*/
        }

        #foot {
            height: 100px;
        }

        #left {
            width: 300px;
        }

        #right {
            width: 700px;
        }

        #tbl {
            height: 400px;
            width: 500px;
        }
    </style>
</head>
<body>
<div id="root">
    <div id="head"></div> <!--head end-->
    <div id="middle">
        <div id="left"></div> <!--left end-->
        <div id="right">
            <table id="tbl"></table>
        </div> <!--right end-->
    </div> <!--middle end-->
    <div id="foot"></div> <!--foot end-->
</div> <!--root-end-->
<script>


    var persons = [
        {name: "张三", age: 33, sex: '男'},
        {name: "老王", age: 45, sex: '男'},
        {name: "彭桂香", age: 19, sex: '女'},
        {name: "李卫红", age: 60, sex: '女'},
        {name: "王二狗", age: 5, sex: '男'},
    ];

    function showTable() { //建立数据和表格之间的映射
        var str = "";
//        for(var i=0;i<persons.length;i++){
        for (var i in persons) {
//            if(i in persons)
            str += "<tr>"
            for (var j in persons[i]) {
                str += "<td>" + persons[i][j] + "</td>"
            }
//            str+=`
//
//                    <td>${persons[i].name}</td>
//                    <td>${persons[i].age}</td>
//                    <td>${persons[i].sex}</td>
//                    <td>
//                        <a href="javascript:del(${i})">删除</a>
//                    </td>
//                </tr>
//            `;
            str += ` <td>
                        <a href="javascript:del(${i})">删除</a>
                    </td></tr>`
        }//for end
        document.querySelector("#tbl").innerHTML = str;
    }//showTable end
    showTable();

    //    y=2x+zb;
    //    y=f(x,z);
    function del(line) {
        delete persons[line];
        showTable();
    }

    function max(a, b) {
        return a > b ? a : b;
    }

    function f(x){
//        for(;;){
//            if(x<10){
//                return;
//            }
//        }
        return 10*x+22;
    }

    var a = f;

    /**
     *
     * @type {{}}
     */
    var xiaoMianGuan={
        name:"老官面",
        address:"银盆南路88号",
        phone:"0731313131",
        paoMian:function(a){//01
            var caidan = ["红烧牛肉面","牛杂粉","牛肉面","刀削面"];
            return caidan[a];
        }
    };




    var mian = xiaoMianGuan.paoMian(1);
    console.log(mian);

    var oneDayThing = [
        function(){
            console.log(`
                刷牙
                吃牛奶
                洗脸
                跑步
                上班
            `);
        },function(){
            console.log(`
                上班
                下班
                吃饭
                看电影

            `);
        },function(){
            console.log(`
                睡觉
                做梦
                梦到吃西瓜
            `);
        },function(){
            console.log(`
               起床
               上厕所
            `);
        }];

    for(var i in oneDayThing){
        oneDayThing[i]();
    }

    var shengXiao=[ "狗","鸡", "猴", "羊", "马", "蛇", "龙", "兔", "虎", "牛", "鼠", "猪"];

</script>
</body>
</html>